<template>
	
	<!-- =============================================== 镂空按钮 -->
	<focus-box v-if="plain==true||plain=='true'"
	:width="width" height="86" :padding="[0,60]" radius="12"
	:bg="theme" bgscheme="light"
	:border="theme" :borderscheme="state_plain[stateIndex].borderscheme"
	mode="row" justify="center" align="center"
	@click="btnClick">
		<!-- loading图标 -->
		<focus-box v-if="state_plain[stateIndex].loading"
		width="50" position="absolute" left="10" top="0" bottom="0"
		mode="col" justify="center" align="center">
			<focus-animation type="rotate__0_360" count="infinite" duration="1500">
				<focus-icon name="fi-loading-tadpole" size="38" :color="theme"></focus-icon>
			</focus-animation>
		</focus-box>
		<!-- 按钮文字 -->
		<focus-text :text="text" size="28" :color="theme" :colorscheme="state_plain[stateIndex].colorscheme"
		weight="bold" lines="1" lineheight="1.8"></focus-text>
	</focus-box>
	
	<!-- =============================================== 常规按钮 -->
	<focus-box v-else
	:width="width" height="86" :padding="[0,60]" radius="12"
	:bg="theme" :bgscheme="state_common[stateIndex].bgscheme"
	mode="row" justify="center" align="center"
	:styles="{'transition-property':'background-color','transition-duration':'0.3s'}"
	@click="btnClick">
		<!-- loading图标 -->
		<focus-box v-if="state_common[stateIndex].loading"
		width="50" position="absolute" left="10" top="0" bottom="0"
		mode="col" justify="center" align="center">
			<focus-animation type="rotate__0_360" count="infinite" duration="1500">
				<focus-icon name="fi-loading-tadpole" size="38" color="white"></focus-icon>
			</focus-animation>
		</focus-box>
		<!-- 按钮文字 -->
		<focus-text :text="text" size="28" color="white" weight="bold" lines="1" lineheight="1.8"></focus-text>
	</focus-box>
	
</template>


<script>
	// 盒子容器组件
	import focusBox from '../focus-box/focus-box.vue';
	// 文本容器组件
	import focusText from '../focus-text/focus-text.vue';
	// 字体图标组件
	import focusIcon from '../focus-icon/focus-icon.vue';
	// 动画效果组件
	import focusAnimation from '../focus-animation/focus-animation.vue';
	
	/**
	 * 按钮
	 * @description vue/nvue通用，按钮，
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-button
	 * @property {String} text 按钮显示文字
	 * @property {type} theme = [primary|success|warning|error] 主题颜色，默认：primary
	 *   @value primary 基本主体色
	 *   @value success 完成色
	 *   @value warning 警告色
	 *   @value error 错误色
	 * @property {String,Number} width 按钮宽度(rpx)，不填则按照显示文字自适应
	 * @property {String} plain = [false|true] 按钮是否镂空，默认：false
	 *   @value false 显示常规按钮
	 *   @value true 将使用按钮镂空
	 * @property {String} loading = [false|true] 按钮名称前是否带loading图标，默认：false
	 *   @value false 隐藏loading图标
	 *   @value true 显示loading图标
	 * @property {String} disabled = [false|true] 是否开启禁用，默认：false
	 *   @value false 不禁用，正常使用
	 *   @value true 开启禁用，按钮色彩变淡
	 * @event {Function} click 点击事件
	 */
	export default {
		name: "focus-button",
		// 传递数据
		props: {
			"tag": { type: String, default: 'focus-button' },
			"text": { type: String, default: '' },
			"theme": { type: String, default: 'primary' },
			"width": { type: [String,Number], default: '' },
			"plain": { type: [String,Boolean], default: false },
			"loading": { type: [String,Boolean], default: false },
			"disabled": { type: [String,Boolean], default: false },
		},
		
		// 组件定义
		components: {
			focusBox,
			focusText,
			focusIcon,
			focusAnimation,
		},
		
		// 页面数据
		data() {
			return {
				// 常规按钮状态列表
				state_common: [
					{ loading: false, bgscheme: 'hover' }, // 普通
					{ loading: true, bgscheme: '' }, // 请求中
					{ loading: false, bgscheme: 'disabled' }, // 禁用
				],
				// 镂空按钮状态列表
				state_plain: [
					{ loading: false, borderscheme: 'hover', colorscheme: '' }, // 普通
					{ loading: true, borderscheme: '', colorscheme: '' }, // 请求中
					{ loading: false, borderscheme: 'disabled', colorscheme: 'disabled' }, // 禁用
				],
			}
		},
		
		// 计算属性
		computed: {
			// 按钮状态下标
			stateIndex() {
				// 初始化下标为0
				var number_index = 0;
				
				// 如果是“禁用”状态
				if (this.disabled == true || this.disabled == 'true') { number_index = 2; }
				// 如果是“加载中”状态
				else if (this.loading == true || this.loading == 'true') { number_index = 1; }
				// 普通状态
				else { number_index = 0; }
				
				// 返回结果下标
				return number_index;
			}
		},
		
		// 页面事件
		methods: {
			
			// 按钮点击事件
			btnClick() {
				// 点击事件传递给父级
				this.$emit('click', { "tag": this.tag });
			}
			
		},
		
	}
</script>
